<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <style type="text/css">
        tr>th {
            text-align: left;
            background: gray;
            color: white;
        }

        tr>th:only-of-type {
            text-align: right;
            background: lightgray;
            color: gray;
        }
    </style>
</head>

<body>
<table>
    <tr>
        <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
    </tr>
    <tr id="firstchoice">
        <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
    </tr>
    <tr>
        <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
    </tr>
</table>
<p>
    <button>Visible</button>
    <button>Collapse</button>
    <button>Hidden</button>
</p>
<script>
    
    var buttons = document.getElementsByTagName("button");
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function(e){
            // visibility这个元素属性只能应用到表相关元素
            document.getElementById("firstchoice").style.visibility = 
            e.target.innerHTML;
        };
    }
</script>
</body>

</html>